import React from 'react';
import {
  Platform,
  WebView,
  Animated,
  Keyboard,
  TouchableOpacity,
  View,
  Text,
} from 'react-native';

import WebViewPage from '../common/WebViewPage';
import SizeUtils from '../../common/SizeUtils';
import Config from '../../config';
import dismissKeyboard from 'dismissKeyboard';

//有键盘
export default class FunctionWebViewPage extends WebViewPage {
  constructor(props) {
    super(props);

    this.state.webUrl = "";
    // this.state.scalesPageToFit = false;
    this.state.scalesPageToFit = Platform.OS === "ios";
    this.state.webViewWidth = SizeUtils.getWindowSize().width;
    this.state.webViewHeight = SizeUtils.getWindowSize().height - Config.paddingTop;

    this.state.keyboardHeightAnimate = new Animated.Value(0);

    this.mark = 1;
  }

  componentWillUnmount() {

  }

  renderWebView(){
    if(this.isRenderWebView()){
      return (
        <Animated.View style={{position:"absolute",
          bottom:this.state.keyboardHeightAnimate,
          width:this.state.webViewWidth,
          height:this.state.webViewHeight,}}>
          {/* <Text style={{fontSize:SizeUtils.translateFontSizeToCode(30)}}>{this.state.url}</Text> */}
          <WebView
              ref={this._initRef.bind(this)}
              automaticallyAdjustContentInsets={false}
              style={{width:this.state.webViewWidth,
                height:this.state.webViewHeight,}}
              source={this._getSource()}
              javaScriptEnabled={true}
              allowsInlineMediaPlayback={true}
              domStorageEnabled={true}
              decelerationRate="normal"
              startInLoadingState={true}
              scalesPageToFit={this.state.scalesPageToFit}
              onNavigationStateChange={this._onNavigationStateChange.bind(this)}
              onLoad={this._onWebLoad.bind(this)}
              injectedJavaScript={this._injectedJavaScript()}
              onMessage={this._onWebViewMessage.bind(this)}
              onLayout={this._onWebViewLayout.bind(this)}
              onShouldStartLoadWithRequest={this._onShouldStartLoadWithRequest.bind(this)}
              renderError={this._onRenderError.bind(this)}
            />
        </Animated.View>
      )
    }
    else {
      return (
       <View style={{width:SizeUtils.getWindowSize().width, paddingTop:SizeUtils.translateDesignHeightToCode(80),
          flexDirection:"row", justifyContent:"center"}}>
        <Text style={{fontSize:SizeUtils.translateFontSizeToCode(30)}}></Text>
      </View>)
    }
  }

  _onShouldStartLoadWithRequest(event) {
    // if(event.url.indexOf("about:blank") > -1) {
    //   return false;
    // }
    return true;
  }

  _onPress() {
    dismissKeyboard();
  }

  componentDidMount() {
    this._keyboardWillShowListener = Keyboard.addListener('keyboardWillShow', this._keyboardWillShow.bind(this));
    this._keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow.bind(this));

    if(Platform.OS === "ios") {
      this._keyboardWillHideListener = Keyboard.addListener('keyboardWillHide', this._keyboardWillHide.bind(this));
    }
    else{
      this._keyboardWillHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardWillHide.bind(this));
    }
    this._keyboardDidChangeListener = Keyboard.addListener('keyboardDidChangeFrame', this._keyboardDidChange.bind(this));
  }

  _dealComponentWillUpdate(nextProps, nextState) {
    super._dealComponentWillUpdate(nextProps, nextState);

    if(nextState.webUrl != this.state.webUrl || this.state.webUrl != this._customUrl) {
      //this.state.webUrl != this._customUrl 第一次update的时候，nextState和this.State一样
      // nextState.webUrl = "http://118.89.111.124/admin/imtest/i-EAP.html";
      if(nextState.webUrl.indexOf("?") > -1) {
        nextState.url = nextState.webUrl + "&mark=" + this.mark;
        nextState.source = {uri:nextState.webUrl + "&mark=" + this.mark};
      }
      else {
        nextState.url = nextState.webUrl + "?mark=" + this.mark;
        nextState.source = {uri:nextState.webUrl + "?mark=" + this.mark};
      }
      this._customUrl = nextState.webUrl;

      this.mark++;
    }
  }

  _dealEnterPage() {

  }

  _dealLeavePage() {

  }

  componentWillUnmount() {
    this._keyboardWillShowListener.remove();
    this._keyboardDidShowListener.remove();
    this._keyboardWillHideListener.remove();
    this._keyboardDidChangeListener.remove();
  }

  _keyboardWillShow(e){
      this._setKeyboradHeight(e.endCoordinates.height);
  }

  _keyboardDidShow(e) {
      this._setKeyboradHeight(e.endCoordinates.height, 1);
  }

  _keyboardWillHide(e){
      this._setKeyboradHeight(0);
  }

  _keyboardDidChange(e) {
    // ToastUtils.show("键盘高度改变:" + e.endCoordinates.height);
  }

  _setKeyboradHeight(height, duration = 250){
      this._playKeyboardHeightAnimate(height, duration);
      // ToastUtils.show("键盘高度:" + height);
  }

  _playKeyboardHeightAnimate(height, duration) {
    this.state.keyboardHeightAnimate.stopAnimation();
    Animated.timing(          // Uses easing functions
     this.state.keyboardHeightAnimate,    // The value to drive
     {toValue: height, duration:duration},           // Configuration
    ).start();                // Don't forget start!
  }

  _onWebViewLayout(event) {
    console.log(event);
  }

  _injectedJavaScript() {
      return ``;
  }

  _onWebViewMessage(event) {
    
  }
}
